<template>
	<view class="container">
		<view class="menu-bar base-style">
			<view class="type-btn" :class="{'type-active': commentForm.type == 0}" @click="checkComment(0)">
				<text class="btn-text">全部</text>
				<text class="btn-count">({{ type[0] }})</text>
			</view>
			<view class="type-btn" :class="{'type-active': commentForm.type == 1}" @click="checkComment(1)">
				<text class="btn-text good">好评</text>
				<text class="btn-count">({{ type[1] }})</text>
			</view>
			<view class="type-btn" :class="{'type-active': commentForm.type == 2}" @click="checkComment(2)">
				<text class="btn-text normal">中评</text>
				<text class="btn-count">({{ type[2] }})</text>
			</view>
			<view class="type-btn" :class="{'type-active': commentForm.type == 3}" @click="checkComment(3)">
				<text class="btn-text bad">差评</text>
				<text class="btn-count">({{ type[3] }})</text>
			</view>
		</view>
		<xw-empty :isShow="commentList.length == 0" text="暂无评价" textColor="#909399"></xw-empty>
		<view class="comment-list">
			<view class="comment-card base-style" v-for="comments in commentList" :key="comments.id">
				<view class="comment-header">
					<image class="portrait" :src="comments.user_avatar" mode="aspectFill"></image>
					<view class="user-info">
						<text class="name">{{ comments.user_name }}</text>
						<view class="rating">
							<text class="rating-label">评分</text>
							<uni-rate v-model="comments.desc_match" color="#ddd" active-color="#e93323" size="14"/>
						</view>
					</view>
				</view>
				<view class="comment-content">
					<text class="content-text">{{ comments.content }}</text>
				</view>
				<view class="comment-meta">
					<text class="attr">购买规格：{{ comments.sku }}</text>
					<text class="time">{{ comments.create_time }}</text>
				</view>
				<view class="comment-images" v-if="comments.pictures && comments.pictures.length > 0">
					<view class="image-item" v-for="(pic, index) in comments.pictures" :key="index" @click="showBig(pic)">
						<image :src="pic" class="comment-image" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="load-more" @click="more()" v-if="loadingType == 'more'">
			<text class="load-text">点击加载更多</text>
		</view>
		<view class="load-more no-more" v-if="loadingType == 'noMore' && commentList.length > 0">
			<text class="load-text">我是有底线的</text>
		</view>
	</view>
</template>

<script>
	import xwEmpty from '@/components/xw-empty/xw-empty';
	import {
		goLogin,
		checkLogin
	} from '@/libs/login';
	
	export default {
		data() {
			return {
				commentList: [],
				commentForm: {
					goods_id: 0,
					page: 1,
					limit: 8,
					type: 0
				},
				totalPage: 1,
				loadingType: 'more',
				type: [0, 0, 0, 0]
			}
		},
		onShow() {
			if (!checkLogin()) {
				goLogin()
			}
		},
		async onLoad(options) {
			if (!checkLogin()) {
				goLogin()
			}
			
			this.commentForm.goods_id = options.goods_id
		},
		mounted() {
			this.getCommentList()
		},
		methods: {
			// 获取评价详情
			async getCommentList(type) {
				uni.showLoading({
					title: '请求中..',
				})
				let res = await this.$api.goods.comments.get(this.commentForm)
				uni.hideLoading()
				
				if (type == 'more') {
					this.commentList = res.data.data.concat(this.commentList)
				} else {
					this.totalPage = res.data.list.last_page
					this.commentList = res.data.list.data
					
					let sum = 0
					for (let key in res.data.num) {
						this.type[key] = res.data.num[key]
						sum += parseInt(res.data.num[key])
					}
					this.type[0] = sum
				}
				
				if (this.commentForm.page == this.totalPage || this.totalPage == 0) {
					this.loadingType = 'noMore'
				}
			},
			// 加载更多
			more() {
				this.commentForm.page += 1
				this.getCommentList('more')
			},
			// 切换状态
			checkComment(type) {
				this.commentForm.page = 1
				this.commentForm.type = type
				
				this.getCommentList()
			},
			// 大图
			showBig(pic) {
				uni.previewImage({
					urls: [pic]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f5f5f5;
	}
	
	.container {
		background: #f5f5f5;
		min-height: 100vh;
		padding: 20upx 0;
	}
	
	.base-style {
		border-radius: 16upx;
		margin: 0 24upx 20upx;
		background: #fff;
		overflow: hidden;
		transition: all 0.3s ease;
	}
	
	.menu-bar {
		display: flex;
		justify-content: space-between;
		padding: 24upx 20upx;
		background: #fff;
		position: sticky;
		top: 0;
		z-index: 10;
		
		.type-btn {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 80upx;
			margin: 0 8upx;
			background: #f8f8f8;
			border-radius: 12upx;
			transition: all 0.3s ease;
			position: relative;
			
			&:first-child {
				margin-left: 0;
			}
			
			&:last-child {
				margin-right: 0;
			}
			
			&:active {
				transform: scale(0.98);
			}
			
			&.type-active {
				background: linear-gradient(135deg, #ff6b6b, #e93323);
				box-shadow: 0 4upx 12upx rgba(233, 51, 35, 0.3);
				
				.btn-text, .btn-count {
					color: #fff;
				}
			}
			
			.btn-text {
				font-size: 28upx;
				font-weight: 500;
				color: #606266;
				margin-bottom: 4upx;
				
				&.good {
					color: #67c23a;
				}
				
				&.normal {
					color: #409eff;
				}
				
				&.bad {
					color: #f56c6c;
				}
			}
			
			.btn-count {
				font-size: 22upx;
				color: #909399;
			}
		}
	}
	
	.comment-list {
		margin-bottom: 120upx;
	}
	
	.comment-card {
		padding: 30upx;
		margin-bottom: 20upx;
		transition: all 0.3s ease;
		
		&:active {
			transform: scale(0.99);
		}
		
		.comment-header {
			display: flex;
			align-items: center;
			margin-bottom: 20upx;
			
			.portrait {
				flex-shrink: 0;
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
				border: 2upx solid #f0f0f0;
			}
			
			.user-info {
				flex: 1;
				margin-left: 20upx;
				
				.name {
					font-size: 30upx;
					font-weight: 500;
					color: #303133;
					margin-bottom: 8upx;
					display: block;
				}
				
				.rating {
					display: flex;
					align-items: center;
					
					.rating-label {
						font-size: 24upx;
						color: #909399;
						margin-right: 12upx;
					}
				}
			}
		}
		
		.comment-content {
			margin-bottom: 20upx;
			
			.content-text {
				font-size: 28upx;
				color: #303133;
				line-height: 1.6;
			}
		}
		
		.comment-meta {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20upx;
			
			.attr {
				font-size: 24upx;
				color: #909399;
				background: #f8f8f8;
				padding: 6upx 12upx;
				border-radius: 6upx;
			}
			
			.time {
				font-size: 24upx;
				color: #c0c4cc;
			}
		}
		
		.comment-images {
			display: flex;
			flex-wrap: wrap;
			gap: 16upx;
			margin-top: 20upx;
			
			.image-item {
				width: 160upx;
				height: 160upx;
				border-radius: 8upx;
				overflow: hidden;
				transition: all 0.3s ease;
				
				&:active {
					transform: scale(0.95);
				}
				
				.comment-image {
					width: 100%;
					height: 100%;
					border-radius: 8upx;
				}
			}
		}
	}
	
	.load-more {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80upx;
		margin: 0 24upx 40upx;
		background: #fff;
		border-radius: 16upx;
		box-shadow: 0 2upx 12upx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
		
		&:active {
			transform: scale(0.98);
		}
		
		&.no-more {
			background: transparent;
			box-shadow: none;
			
			.load-text {
				color: #c0c4cc;
			}
		}
		
		.load-text {
			font-size: 28upx;
			color: #909399;
		}
	}
</style>